<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'
import TableAction from '#/components/TableAction/index.vue'
import { useTableCURD } from '#/hooks/useTableList'
import { creatorPageApi } from '#/views/customer/creator/use/api'
import { sellerPageApi } from '#/views/customer/seller/use/api'
import AddEditModal from '#/views/resource/goods/goodsInformation/components/AddEditModal.vue'
import type { TableListItem } from '#/views/resource/goods/goodsInformation/use/api'
import { goodsInformationPageApi } from '#/views/resource/goods/goodsInformation/use/api'
import { lablePageApi } from '#/views/resource/tasktag/use/api'
import { Page, useVbenModal } from '@vben/common-ui'
import { $t } from '@vben/locales'
import { Button, message } from 'ant-design-vue'
import { ref } from 'vue'
import {
    creatorColumns,
    creatorSchema,
    goodsColumns,
    goodsSchema,
    sellerColumns,
    sellerSchema
} from './table'

const props = withDefaults(
    defineProps<{
        modalType?: Record<string, any>
    }>(),
    {
        modalType: () => ({})
    }
)
const [Modal, ModalApi] = useVbenModal()
const getSchema = () => {
    switch (
        props.modalType.type // 1卖家2创作者3商品
    ) {
        case 1: {
            return sellerSchema
        }
        case 2: {
            return creatorSchema
        }
        case 3: {
            return goodsSchema
        }
        default: {
            return goodsSchema
        }
    }
}

const getColumns = () => {
    switch (props.modalType.type) {
        case 1: {
            return sellerColumns
        }
        case 2: {
            return creatorColumns
        }
        case 3: {
            return goodsColumns
        }
        default: {
            return goodsColumns
        }
    }
}
const getPageListApi = () => {
    switch (props.modalType.type) {
        case 1: {
            return sellerPageApi
        }
        case 2: {
            return creatorPageApi
        }
        case 3: {
            return goodsInformationPageApi
        }
        default: {
            return goodsInformationPageApi
        }
    }
}

const formOptions: VbenFormProps = {
    schema: getSchema()
}
const gridOptions: VxeGridProps<any> = {
    columns: getColumns(),
    proxyConfig: {
        ajax: {
            query: async ({ page }, formValues) => {
                // 根据传来lableid查询关联列表
                formValues.labelId = ModalApi.getData().lableId
                const api = getPageListApi()
                const res = await api.getPageList({
                    ...formValues,
                    limit: page.pageSize,
                    page: page.currentPage
                })
                return {
                    items: res.records,
                    total: res.total
                }
            }
        }
    }
}

/**
 * 表格配置
 */
const { Grid, GridApi, FormModal, handleSuccess, getSelectRows } = useTableCURD<TableListItem>({
    formOptions,
    gridOptions,
    modalOptions: {
        connectedComponent: AddEditModal
    }
})
async function handleRmove(rowIds: number[] | undefined) {
    rowIds = rowIds || []
    const idArray = ref<number[]>([])
    const selectedRows = getSelectRows()
    if (selectedRows.length === 0 && rowIds.length === 0) {
        message.success($t('common.lableRemoveAlert'))
        return
    }
    idArray.value = rowIds.length === 0 ? selectedRows.map((row) => row.id) : rowIds

    await lablePageApi.deleteRef({
        id: ModalApi.getData().lableId,
        refIdList: idArray.value
    })
    GridApi.query()
    // message.success($t('common.lableRemoveSuccess'))
}
/**
 * table 操作
 * @param record
 */
function getActions(record: TableListItem) {
    const arr: any[] = [
        {
            icon: 'ant-design:enter-outlined',
            color: '#bb1b1b',
            tooltip: $t('common.lableRemove'),
            popConfirm: {
                title: $t('common.lableRemoveTost'),
                placement: 'left',
                onConfirm: () => {
                    // 处理
                    handleRmove([record.id])
                }
            }
        }
    ]
    return arr
}
</script>

<template>
    <Modal title="标签关联">
        <Page auto-content-height>
            <Grid>
                <template #toolbar-tools>
                    <Button @click="handleRmove([])">批量移除</Button>
                </template>
                <template #action="{ row }">
                    <TableAction :actions="getActions(row)" />
                </template>
            </Grid>
            <FormModal @success="handleSuccess" />
        </Page>
    </Modal>
</template>
